<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item to="/dashboard">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="user-container">
      <el-row>
        <el-col :span="8">
          <!-- 两个按钮 -->
          <el-button type="danger" size="mini" icon="el-icon-delete">
            删除选中
          </el-button>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-plus"
            @click="handleUserAdd"
          >
            添加
          </el-button>
        </el-col>
        <el-col :span="8" :offset="8">
          <el-input
            v-model.trim="keyword"
            placeholder="请输入内容"
            size=" small"
            @keyup.enter.native="handleClickSearch"
            ><el-button
              slot="append"
              icon="el-icon-search"
              @click="handleClickSearch"
            >
            </el-button
          ></el-input>
        </el-col>
      </el-row>
      <!-- 数据表格 -->
      <el-table class="el-table" :data="users" stripe border>
        <el-table-column label="id" prop="id"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scoped">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="handleEdit(scoped.row)"
            >
              编辑
              <!-- 图标写在后面<i class="el-icon-edit"></i> -->
            </el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="handleDel(scoped.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 对话框 -->
    <el-dialog
      :title="isEdit ? '修改用户' : '添加用户'"
      :visible.sync="dialogVisible"
    >
      <el-form :rules="rules" :model="form" ref="form" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="" @click="onSubmit">提交</el-button>
          <el-button type="">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'User',
  data() {
    return {
      keyword: '',
      users: [
        // { id: 1, username: '小明' },
        // { id: 2, username: '小美' },
        // { id: 3, username: '小炮' },
      ],
      page: 1, //当前页码数
      size: 5, //每页显示条数
      total: 0,
      dialogVisible: false,
      isSearch: false,
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur',
          },
        ],
      },
      isEdit: false,
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      this.$http
        .get(`/users?page=${this.page}&size=${this.size}`)
        .then((res) => {
          // console.log(res) //查看返回数据
          this.users = res.result.data
          this.total = res.result.total
        })
    },
    handleCurrentChange(p) {
      this.page = p
      //重新获取分页数据
      if (!this.isSearch) {
        this.getUser()
      } else {
        this.getSearch()
      }
    },
    handleSizeChange(s) {
      this.size = s
      if (!this.isSearch) {
        this.getUser()
      } else {
        this.getSearch()
      }
    },
    handleUserAdd() {
      // 跳转页面
      // this.$router.push('/user/add')
      this.dialogVisible = true
      // 修改状态
      this.isEdit = false
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          //进行判断如果isEdit为false那么就是新增---否则就是修改
          if ((this.isEdit = false)) {
            //发送请求post请求,新增
            this.$http.post('/users', this.form).then((data) => {
              const { code, message, result } = data
              if (code == 0) {
                //提示新增成功
                this.$message.success(message)
                // 重新获取数据
                this.getUser()
                // 关闭对话框
                this.dialogVisible = false
                //清空表单
                this.$refs['form'].resetFields()
              }
            })
          } else {
            // 这个就是isEdit是修改的状态
            this.$http.put(`/users/${this.form.id}`, this.form).then((data) => {
              const { code, message, result } = data
              if (code == 0) {
                //提示修改成功
                this.$message.success(message)
                // 重新获取数据
                this.getUser()
                // 关闭对话框
                this.dialogVisible = false
                //清空表单
                this.$refs['form'].resetFields()
              }
            })
          }
        }
      })
    },
    handleEdit(row) {
      // console.log(row)
      //显示对话框
      this.dialogVisible = true
      // 改变状态
      this.isEdit = true
      // 回显数据的意思是--点进去的时候输入看显示当前行的数据
      this.$http.get(`/users/${row.id}`).then((data) => {
        // console.log(data)
        this.form = data.result
      })
    },
    handleDel(row) {
      if (confirm('你确定要删除用户信息嘛')) {
        this.$http.delete(`/users/${row.id}`).then((data) => {
          const { code, message, result } = data
          if (code == 0) {
            //提示修改成功
            this.$message.success(message)
            // 重新获取数据
            this.getUser()
          }
        })
      }
    },

    handleClickSearch() {
      // 搜索框实现搜索功能
      // console.log(this.keyword)
      // 这个已经对是否处于搜索进行判断了
      this.isSearch = true
      this.getSearch()
    },
    getSearch() {
      this.$http
        .patch(
          //${this.keyword}是字符串需要加上''引号
          `/users?username=${this.keyword}&page=${this.page}&size=${this.size}`
        )
        .then((data) => {
          // console.log(data)
          // console.log(data.result.total.total)
          this.users = data.result.data
          this.total = data.result.total.total
          // this.total = total
        })
    },
  },
}
</script>

<style scoped>
/* 加上scoped作用域,在这里写的样式仅仅会影响当前组件,不会影响到全局 */
.user-container {
  margin-top: 20px;
  min-width: 800px;
}
.el-table {
  margin-top: 20px;
}
</style>
